import { log } from "console";
import { ElButton } from "element-plus";
import { defineComponent, ref } from "vue";
import { Steps } from "~/src/components/Steps";
import { UserInfo } from "~/src/components/UserInfo";
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import { KEEP_VIDEO_TOP } from '~/src/config';
export default defineComponent({
    setup() {
        const id1 = ref(-1)
        const je = ref()
        const jeArr = ref(["200", "500", "1000", "2000"])
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080
        return () => <div class={Style.top}>
            <UserInfo></UserInfo>
            <Steps></Steps>
            <div class={Style.container_mar} >
                <div class={Style.body}>
                    <div class={Style.outer}>
                        <div class={Style.fontStyle}>
                            基本信息：
                        </div>
                        <div class={Style.fontStyle2} style={{ display: "flex", marginLeft: "44px" }}>
                            <div >
                                <div>
                                    就 诊 人：张*芬
                                </div>
                                <div>
                                    住院科室：皮肤科
                                </div>
                                <div>
                                    住院日期：2025-1-9 10:12:10
                                </div>
                                
                                <div>
                                    余   额：<span style={{ color: "red" }}>500.00</span>
                                </div>
                            </div>
                            <div style={{ paddingLeft: "60px" }}>
                                <div>
                                    就诊卡号：1233456789
                                </div>
                                <div>
                                    住院状态：住院中
                                </div>
                                <div>
                                    费用全额：¥2545.60
                                </div>
                            </div>

                        </div>
                        {
                            KEEP_VIDEO_TOP?"":<div class={Style.divider_contain}>
                            <div class={Style.divider_top}></div>
                        </div>
                        }
                        
                        <div>
                            <div class={Style.fontStyle3}>
                                预缴金额：
                            </div>
                            <div class={Style.fontStyle4}>
                                <span> ￥</span>
                                <input type="text" onInput={() => {
                                    const tempData = jeArr.value.includes(je.value)
                                    id1.value = tempData ? jeArr.value.indexOf(je.value) : -1
                                }} v-model={je.value} class={Style.noborderinput} placeholder="请输入缴纳金额" />
                            </div>

                        </div>
                        <div class={Style.divider_contain}>
                            <div class={Style.divider_top}></div>
                        </div>

                        <div class={Style.outer2}>
                            {
                                jeArr.value.map((e, index) => <div id={`act${index}`} class={[Style.tag, Style.fontStyle_1,
                                    , id1.value == index ? Style.tag_active : ""
                                ]}
                                    onClick={() => {
                                        id1.value = index
                                        je.value = e
                                    }}
                                >
                                    <div >{e}元</div>
                                </div>)
                            }

                        </div>

                        <div class="mainZyyjBtn">
                            <ElButton class={[Style.zyyjbtn]} type="success">去支付</ElButton>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    }
})